<template>
	<view>
		<!-- @click="{{name=='arrow'?'showPopup':''}}" -->
		<!-- 登录顶部 -->
		<view class="top" @click="PoupOnShow">
			<image class="imgs" :src="userInfo.avatar" />
			<view class="Login">{{userInfo.nickname}}</view>
			<view class="icon" v-show="userInfo.nickname=='点击登录'? true:false
			">
				<u-icon name="arrow-right" color="gray" size="28"></u-icon>
			</view>
			<view class="icon" @click="LoginOut" v-show="userInfo.nickname=='点击登录'? false:true
			">
				<u-icon name="close" color="gray" size="28"></u-icon>
			</view>
		</view>
		<!-- 弹出层登录 -->
		<u-popup :show="PoupShow" overlay mode="center" @close="PoupShowOnhide" @open="PoupOnShow">
			<view style="width: 680rpx;height: 500rpx; padding: 100rpx 40rpx;box-sizing: border-box;">
				<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
					<u-form-item labelWidth="150rpx" label="用户名" prop="userInfo.userName" borderBottom
						@click="showSex = true; " ref="item1">
						<u--input v-model="model1.userInfo.userName" disabledColor="#ffffff" placeholder="请输入用户名"
							border="none"></u--input>
					</u-form-item>
					<u-form-item label="密码" labelWidth="150rpx" prop="userInfo.psw" borderBottom
						@click="showSex = true; " ref="item1">
						<u--input v-model="model1.userInfo.psw" disabledColor="#ffffff" placeholder="请输入密码"
							border="none"></u--input>
					</u-form-item>
					<view class="Loginbtn" @click="submit">
						登录/注册
					</view>
				</u--form>
			</view>
		</u-popup>
		<!-- 退出登录 -->
		<!--  :showConfirmButton="true" confirmColor="red"  -->
		<u-modal :show="LoginOutShow" :title="title" showCancelButton confirmColor="red" closeOnClickOverlay zoom
			@confirm="confirmOut" @cancel="LoginOutShow = false" @close="LoginOutShow = false">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>


		<!-- 宫格 -->
		<u-grid :border="true" col="3">
			<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex"
				:customStyle="{width:250+'rpx',height:250+'rpx'}">
				<u-icon :customStyle="{paddingTop:20+'rpx',paddingBottom:20+'rpx'}" :name="listItem.icon" :size="22">
				</u-icon>
				<text class="grid-text">{{listItem.name}}</text>
			</u-grid-item>
		</u-grid>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import request from "../../request/request.js";
	import {
		LoginAPI
	} from "../../request/api.js"
	export default {
		data() {
			return {
				title: '登出账号确认',
				content: `您是否想要退出当前账号`,
				LoginOutShow: false,
				showSex: false,
				model1: {
					userInfo: {
						userName: '',
						psw: '',
					},
				},
				rules: {
					'userInfo.userName': {
						type: 'string',
						required: true,
						message: '请填用户名',
						trigger: ['blur', 'change']
					},

					'userInfo.psw': [{
							type: 'string',
							required: true,
							message: '请输入密码',
							trigger: ['blur', 'change']
						}, {
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return value.length >= 6 && value.length < 11
							},
							message: '密码长度应该在6到11位之间',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}


					]

				},
				userInfo: {
					avatar: "https://tse1-mm.cn.bing.net/th/id/OIP-C.dsyrxtFkb0pnOhB2Ob4AQwAAAA?w=159&h=180&c=7&r=0&o=5&pid=1.7",
					nickname: "点击登录"
				},
				list: [{
						icon: "rmb-circle",
						name: "我的订单",
						id: 1
					},
					{
						icon: "coupon",
						name: "优惠卷",
						id: 2
					},
					{
						icon: "bag",
						name: "礼品卡",
						id: 3
					},
					{
						icon: "map",
						name: "我的收藏",
						id: 4
					},
					{
						icon: "pushpin",
						name: "我的足迹",
						id: 5
					},
					{
						icon: "account",
						name: "会员福利",
						id: 6
					},
					{
						icon: "setting",
						name: "地址管理",
						id: 7
					},
					{
						icon: "warning",
						name: "账号安全",
						id: 8
					},
					{
						icon: "kefu-ermai",
						name: "联系客服",
						id: 9
					},
					{
						icon: "question-circle",
						name: "帮助中心",
						id: 10
					}, {
						icon: "more-circle",
						name: "意见反馈",
						id: 11
					},

				],
				PoupShow: false,
			}
		},
		onShow() {
			let token = uni.getStorageSync("token")

			if (token) {
				this.userInfo.avatar = uni.getStorageSync("avatar")
				this.userInfo.nickname = uni.getStorageSync("nickname")
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(async () => {
					uni.$u.toast('校验通过')
					let res = await request({
						url: LoginAPI,
						data: {
							username: this.model1.userInfo.userName.trim(),
							pwd: this.model1.userInfo.psw.trim()
						},
						method: 'POST',
						successCallBack: (res) => {
							console.log(res)

							const {
								userInfo,
								token
							} = res.data.data
							// console.log(token, userInfo)
							uni.setStorageSync("token", token)
							// uni.setStorageSync("userInfo", JSON.stringify(userInfo))
							let avatar = userInfo.avatar
							let nickname = userInfo.nickname
							uni.setStorageSync("avatar", avatar)
							uni.setStorageSync("nickname", nickname)
							this.userInfo = userInfo;
							this.$refs.uForm.resetFields()
							this.PoupShow = false
							uni.showToast({
								title: '登录成功啦 bb~',
								duration: 4000
							})
							uni.switchTab({
								url: "/pages/index/index"
							})




						},
						failCallBack: (err) => {
							console.log(err)
						}
					})

				}).catch(errors => {
					uni.$u.toast('校验失败')
				})

			},
			LoginOut() {
				this.LoginOutShow = true
			},
			confirmOut() {
				uni.removeStorageSync("token"),
					this.userInfo.avatar =
					"https://tse1-mm.cn.bing.net/th/id/OIP-C.dsyrxtFkb0pnOhB2Ob4AQwAAAA?w=159&h=180&c=7&r=0&o=5&pid=1.7",
					this.userInfo.nickname = "点击登录",
					this.LoginOutShow = false
			},

			PoupOnShow() {
				if (this.userInfo.nickname == '点击登录') {
					this.PoupShow = true
				} else {
					this.LoginOutShow = true
				}
			},

			PoupShowOnhide() {
				this.PoupShow = false
			}

		}
	}
</script>

<style lang="scss" scoped>
	.top {
		height: 200rpx;
		width: 100vw;
		background-color: #333;
		padding: 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 2;

	}

	.gird {
		justify-content: center;
	}

	.Login {
		color: aliceblue;
		margin-left: 30rpx;
		font-size: 30rpx;
	}

	.Loginbtn {
		margin: 50rpx;
		width: 500rpx;
		padding: 20rpx 0;
		background-color: red;
		color: #fff;
		font-size: 30rpx;
		height: 150rxp;
		line-height: 150rxp;
		text-align: center;
		border-radius: 50rpx;
	}

	.imgs {

		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}

	.icon {
		position: absolute;
		right: 20rpx;
		top: 40%;
		z-index: 3;
	}

	.cur {
		position: absolute !important;
		top: 35%;
		right: 20rpx;
		z-index: 1;
		color: #fff;

	}
</style>
